<!DOCTYPE HTML>
<html lang="zxx">

<head>
	<title>登录</title>
	<!-- Meta tag Keywords -->
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta charset="UTF-8" />
	<meta name="keywords" content="Triple Forms Responsive Widget,Login form widgets, Sign up Web forms , Login signup Responsive web form,Flat Pricing table,Flat Drop downs,Registration Forms,News letter Forms,Elements" />
	<script>
		addEventListener("load", function () {
			setTimeout(hideURLbar, 0);
		}, false);
		function hideURLbar() {
			window.scrollTo(0, 1);
		}
		

	</script>
	<!-- Meta tag Keywords -->

	<!-- css files -->
	<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
	<!-- Style-CSS -->
	<link href="css/font-awesome.min.css" rel="stylesheet">
	<!-- Font-Awesome-Icons-CSS -->
	<!-- //css files -->

</head>

<body>
	<div class="main-bg" id="mian">
		<!-- title -->
		<h1>银行转账系统</h1>
		<!-- //title -->
		<div class="sub-main-w3">
			<div class="image-style">

			</div>
			<!-- vertical tabs -->
			<div class="vertical-tab">
				<div id="section1" class="section-w3ls">
					<input type="radio" name="sections" id="option1" checked>
					<label for="option1" class="icon-left-w3pvt"><span class="fa fa-user-circle" aria-hidden="true"></span>登录</label>
			
					<article>
						<form action="#" method="post">
							<h3 class="legend">账户登录</h3>
							
							<div class="input">
								<span class="fa fa-envelope-o" aria-hidden="true"></span>
								<input type="phone" v-model="logindata.number" placeholder="手机号/身份证号" name="number" required />
							</div>
							<br />
							<div class="input">
								<span class="fa fa-key" aria-hidden="true"></span>
								<input type="password" v-model="logindata.password" placeholder="密码" name="password" required />
							</div>
						
							
							
			
							<br />
							
							
							<button type="submit" class="btn submit" style="border-radius:8px; display: inline; height: 59px; font-size: 15px; width: 180px;">登 录</button>
							
				
							<a href="./register.html"><button type="button" class="btn submit" style="border-radius:8px; float:right;display: inline; height: 59px; font-size: 15px; width: 180px;">注 册</button></a>
							
							
							
							
						</form>
					</article>
				</div>
				
				<div id="section2" class="section-w3ls">
					<input type="radio" name="sections" id="option2">
				
					<label for="option2" class="icon-left-w3pvt"><span class="fa fa-lock" aria-hidden="true"></span>忘记密码?</label>
					
					<article>
						<form action="#" method="post">
							<h3 class="legend last">重置密码</h3>
							<p class="para-style">请输入您的手机号或身份证号以及新的密码，我们将为您重置密码。</p>
							
							<div class="input">
								<span class="fa fa-id-card" aria-hidden="true"></span>
								<input type="text" v-model="forgetdata.number" placeholder="手机号/身份证号" name="number" required />
							</div>
							<div class="input">
								<span class="fa fa-key" aria-hidden="true"></span>
								<input type="password" v-model="registerdata.password" placeholder="新密码" name="password" required />
							</div>
							<button type="submit" class="btn submit last-btn" style="height: 54px;">提交</button>
							<br />
							
						
						</form>
					</article>
				</div>
			</div>
			<!-- //vertical tabs -->
			<div class="clear"></div>
		</div>
		<!-- copyright -->
		<div class="copyright">
			<h2>Copyright &copy; 2021 版权所有| by
				<a href="#">No.11 Group</a>
			</h2>
		</div>
		<!-- //copyright -->
	</div>

</body>
<!-- script   -->
<script src="https://www.jq22.com/jquery/vue.min.js"></script>
<!-- JavaScript 代码需要放在尾部（指定的HTML元素之后） -->
<script>
new Vue({
    el:'#mian',
    data: {
        nowYear:new Date().getFullYear(),
        logindata:{
				number:"",
				password:""
			},
			registerdata:{
				name:"",
				password:"",
				confirmPassword:""
			},
			forgetdata:{
				number:"",
			}
    }
});
</script>
<!-- //script -->

</html>
